<template>
<div>
  <div class="searchTitle">
    <div class="search">
      <el-input
          placeholder="请输入内容"
          v-model="input"
          clearable>
      </el-input>
      <el-button type="primary" class="bSreach" @click="productFind">搜索</el-button>
    </div>
    <div>
      <el-button type="primary">批量删除</el-button>
      <el-button type="primary">添加</el-button>
    </div>
  </div>

  <el-table
      :data="tableData"
      style="width: 100%;height: 500px">
    <el-table-column
        label="商品ID"
        width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>product_id: {{ scope.row.product_id }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.product_id }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
        label="名称"
        width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>title: {{ scope.row.title }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.title }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
        label="经销商ID"
        width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>经销商ID: {{ scope.row.businss_id	}}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.businss_id }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
        label="商品描述"
        width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.description }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.description }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column
        label="是否上架"
        width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>bool: {{ scope.row.is_public|up }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.is_public|up }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :total="total" @current-change="pager" @prev-click="uppager" @next-click="nextpager">
  </el-pagination>

</div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
import AX from "./axios"

const ax = new AX()

export default {
  name: "product",
  data(){
    return {
      msg:"我是产品",
      tableData:[],
      input:"",
      total:0

    }
  },
  created() {
    ax.ProductList().then(response=>{
      this.tableData = response.data.data
      this.total = response.data.total
    })
  },
  methods:{
    ...mapActions("model", []),
    ...mapMutations("model", []),
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    productFind(){
      ax.ProductList({title:this.input}).then(response=>{
        this.tableData = response.data.data
        this.total = response.data.total
      })
    },
    pager(val){
      ax.ProductList({page:val}).then(response=>{
        this.tableData = response.data.data
        this.total = response.data.total
      })
    },
    uppager(val){
      console.log(val)
    },
    nextpager(val){
      console.log(val)
    }

  },
  computed:{
    ...mapGetters("model", []),
    ...mapState("model", [])
  },
  filters:{
    up(val){
      return val?"是":"否"
    }
  }
}
</script>

<style scoped lang="less">

.searchTitle{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  .search{
    display: flex;
  }


}
.bSreach{
  margin-left: 10px;
}


</style>